import React, { Component, useState, useCallback } from 'react'
import { connect } from 'react-redux'
import HeaderBar from '@/components/headerBar'
import styled from 'styled-components'
import Dialog from '../../components/dialog/index'
import Zfilter from './zfilter'
import { Test } from './test'

const ListWrapper = styled.section`
  width: 100%;
  height: 60px;
  display:flex;
  ul {
    flex:1;
    display:flex;
    flex-direction: column;
    li {
      flex:1;
      display:flex;
      justify-content:center;
      align-items:center;
    }
  }
`

interface IProps {
  index: {
    from: string,
    to: string
  },
  query: any
}

/**
 * 
 * @param props 
 * 
 *  /rest/train
 * 
 * method: 
 * 
 * params: / data:
 * 
    from: 北京->  出发时间
    to: 上海 ->    
    date: 2020-08-27 
    highSpeed: false
    orderType: 1
    onlyTickets: true
    checkedTicketTypes: 
    checkedTrainTypes: 
    checkedDepartStations: 
    checkedArriveStations: 
    departTimeStart: 0
    departTimeEnd: 24
    arriveTimeStart: 0
    arriveTimeEnd: 24
 * 
 *  
 */


const List: React.FC<any> = (props) => {
  const { list } = props;
  return <ListWrapper>
    {
      list.map((item: any) => {
        return (
          <>
            <ul>
              <li>{item.dTime}</li>
              <li>{item.aTime}</li>
            </ul>
            <ul>
              <li>{item.aCity}</li>
              <li>{item.dCity}</li>
            </ul>
            <ul>
              <li>{item.trainNumber}</li>
              <li>{item.time}</li>
            </ul>
            <ul>
              <li>{item.priceMsg}</li>
              <li>{item.trainShowDesc}</li>
            </ul>
          </>

        )
      })
    }

  </ListWrapper>
}

const QueryFn: React.FC<IProps> = (props) => {
  const [show, setShow] = useState(true)
  const { index: { from, to }, query: { list } } = props;

  // const [data, setData] = useState('<form> <input type="text" /> hello world</form>')
  const onBack = useCallback(() => {

  }, [])

  const closeClick = useCallback((flag) => {
    console.log('flag:', flag, show, 'show')
    setShow(false)
  }, [])

  return <div className="query-wrapper">

    <Test></Test>
    {/* <Dialog
      visiable={show}
      closeClick={closeClick}
    /> */}

    <Zfilter></Zfilter>

    <HeaderBar
      children={<div>{from}---{to}</div>}
      onBack={onBack}
    />
    {/* <List list={list} /> */}
    {/* 支付宝支付：from表单 */}
    {/* innerHTML  v-html */}
    {/* <div dangerouslySetInnerHTML={{ __html: data }}></div> */}



  </div>
}

export default connect((state) => {
  return { ...state }
}, (dispatch) => {
  return { dispatch }
})(QueryFn) 
